<template>
	<view>
		<u-navbar title="组长团队" is-fixed
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<scroll-view :scroll-y="true" :style="'height:' + scrollH+'rpx;'" refresher-enabled="true"
			:refresher-triggered="triggered" :refresher-threshold="50" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
			<view class="group">
				<view class="box" v-for="(item, index) in teamList" :key="item.id" @click="toDetail(item.id)">
					<view class="see">
						<u-icon name="eye-fill" color='#FE5477' size="20" style='margin-right: 5rpx;'></u-icon>
						{{item.reading_volume}}
					</view>
					<image class="group-img" :src="item.image" mode="aspectFill"></image>
					<view class="group-name">{{item.name}}</view>
					<view class="group-nickname">
						{{item.title}}
					</view>
				</view>
			</view>
			<no-thing v-if="teamList.length==0"></no-thing>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teamList: [],
				page: 1,
				searchValue: '',
				baseUrl: this.$u.http.config.baseUrl,
				scrollH: 0,
				triggered: false,
			}
		},
		onLoad() {
			this.initData()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - 200;
					// #endif
				}
			});
		},
		onReachBottom() {
			this.page++
			this.initData()
		},
		methods: {
			toDetail(id) {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$u.route('/packageB/pages/groupDetail/groupDetail', {
						id
					})
				} else {
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
				}
			},
			initData() {
				let quaryData = {
					keywork: this.searchValue,
					page: this.page,
					limit: 10,
				}
				this.$u.api.getGroupList(quaryData).then(res => {
					this.teamList = [...this.teamList, ...res.data]
				})
			},
			onPulling(e) {
				this.triggered = true;
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.page = 1;
				await setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					this.teamList = []
					this.initData();
				}, 1000);
				uni.showToast({
					title: '刷新成功',
					duration: 1000
				})
			},
			onRestore() {
				this.triggered = false; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			}
		}
	}
</script>

<style lang="scss">
	.group {
		width: 100%;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// flex-direction: row;

		.box {
			width: 48%;
			height: 460rpx;
			margin: 10rpx 0;
			box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			text-align: center;
			position: relative;

			.see {
				z-index: 1;
				padding: 10rpx;
				font-size: 16rpx;
				color: #FE5477;
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				line-height: 10rpx;
				border-radius: 50rpx;
				min-width: 60rpx;
				background-color: rgba(255, 222, 222, 0.5);


			}

			.group-img {
				width: 90%;
				margin: 20rpx auto;
				margin-bottom: 0rpx;
				border-radius: 10rpx;
				background-color: antiquewhite;
				height: 300rpx;
			}

			.group-name {
				color: #000;
				font-weight: 600;
				font-size: 32rpx;
			}

			.group-nickname {
				color: #FE5477;
				font-size: 28rpx;
			}
		}
	}
</style>
